<!--顶部-->
<ol class="breadcrumb default square rsaquo sm" id="content-breadcrumb">
    <li><a href="#"><i class="fa fa-home"></i></a></li>
    <li>内容管理</li>
    <li class="category-name"></li>
</ol>

<!--列表和搜索区域-->
<div id="head-area" class="the-box no-border no-margin clearfix">
    <!--搜索区域-->
    <!--搜索条件-->
    <div id="search-area">
        <div class="btn-group">
            <input type="text" class="form-control" placeholder="标题搜索">
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">全部</button>
            <button type="button" class="btn btn-warning">公开</button>
            <button type="button" class="btn btn-info">私有</button>
        </div>
        <div class="btn-group">
            <button id="search-btn" class="btn btn-primary">查询</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-default" onclick="">重置</button>
        </div>
        <div class="btn-group pull-right">
            <button id="new-btn" class="btn btn-info" type="button" title="新增内容">
                <i class="fa fa-plus"></i></button>
        </div>
    </div>

    <div id="list-area" class="table-responsive clearfix">
        <div class="no-border" style="margin-top: 10px">
            <div class="table-responsive">
                <table id="content-table" class="table table-th-block table-striped table-hover"
                       style="margin-bottom: 0px;text-align: center">
                    <thead>
                    <tr>
                        <th style="text-align: center;">序号</th>
                        <th style="text-align: center;">标题</th>
                        <th style="text-align: center;">阅读</th>
                        <th style="text-align: center;">踩</th>
                        <th style="text-align: center;">赞</th>
                        <th style="text-align: center;">公开</th>
                        <th style="text-align: center;">更新时间</th>
                        <th style="text-align: center;">操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div><!-- /.table-responsive -->
        </div><!-- /.the-box -->
    </div>

    <!--新增标题-->
</div>

<!--展示modal-->
<div id="show-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width: 1200px">
        <div class="modal-content">
            <div class="modal-body clearfix">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="">×
                </button>
                <!--标题-->
                <div class="row">
                    <!-- BEGIN FEATURED POST -->
                    <div class="featured-text relative-left col-md-12">
                        <h3 id="show-title" style="text-align: center;margin-top: 0"></h3>
                        <span>
                            <span id="show-time" class="additional-post">2 hours ago</span>
                        </span>
                        <span class="additional-post-wrap pull-right">
                            <span class="additional-post"><i class="fa fa-user"></i>by <span id="show-name">Admin</span></span>
                            <span class="additional-post"><i class="fa fa-clock-o"></i><span
                                    id="show-date">April 20</span></span>
                            <span class="additional-post"><i class="fa fa-comment"></i><span id="show-comment">3 comments</span></span>
                            <span class="additional-post"><i class="fa fa-thumbs-up"></i><span
                                    id="show-like">Like</span></span>
                            <span class="additional-post"><i class="fa fa-thumbs-down"></i><span id="show-dislike">Dislike</span>
                            </span>
                        </span>
                        <hr class="all-hr"/>
                        <div id="show-content" style="width: inherit;word-wrap: break-word;margin-top: 15px">
                        </div>
                    </div><!-- /.featured-text -->
                </div>
            </div>
        </div>
    </div>
</div>
<!--新增/编辑区域-->
<div id="new-content-area" class="hide">
    <!--person-->
    <div id="person" class="row the-box no-border" style="padding: 15px 0 0;;margin: 0">
        <div class="form-group col-md-12  col-xs-12">
            <div class="input-group col-md-12 col-xs-12">
                <input id="content-title" type="text" class="form-control" placeholder="标题">
            </div>
        </div>
        <div class="form-group col-md-12  col-xs-12">
            <div class="input-group col-md-12 col-xs-12">
                <input id="content-tags" type="text" class="form-control" placeholder="标签">
            </div>
        </div>
        <div class="col-md-12">
            <div id="summernote"></div>
        </div>
        <div class="form-group col-md-6  col-xs-12" style="margin: 0 -15px 15px 15px">
            <label class="col-md-6 col-xs-6" style="padding: 10px">
                <input type="radio" value="true" class="icheck-con pull-left" name="is-pub" checked>
                公开
            </label>
            <label class="col-md-6 col-xs-6" style="padding: 10px">
                <input type="radio" value="false" class="icheck-con pull-left" name="is-pub">
                不公开
            </label>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class=" pull-right">
                <button id="reset-btn" class="btn btn-warning">重置</button>
                <button id="cancel-btn" class="btn btn-danger">取消</button>
                <button id="save-btn" class="btn btn-info" onclick="">提交</button>
            </div>
        </div>
    </div>

</div>
<div id="img-upload" class="modal fade" aria-hidden="false" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">插入图片</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12" style="padding: 0">
                    <label>上传图片</label>
                </div>
                <div class="form-group col-md-12" style="padding: 0;">
                    <div id="container-img" class="input-group">
                        <input id="new-img-name" type="text" class="form-control" readonly>
                        <span class="input-group-btn">
                            <span id="new-img-select" class="btn btn-default btn-file">
                                选择图片 <input type="file" name="">
                            </span>
                        </span>
                        <span class="input-group-btn">
							<span id="new-img-upload" class="btn btn-info">
								上传
                            </span>
                        </span>
                    </div><!-- /.input-group -->
                </div>
                <div style="margin: 15px 0" class="row">
                    <label>图片地址</label>
                    <div class="input-group col-md-12">
                        <input type="text" class="form-control" readonly>
                        </span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button href="#" class="btn btn-primary note-image-btn disabled" disabled>插入图片
                </button>
            </div>
        </div>
    </div>
</div>

<script src="/js/moment.min.js"></script>

<script>
    // 页面加载执行函数
    $(function () {
        $("#new-btn").on('click', function () {
            newContent();
        })
        $("#search-btn").on('click', function () {
//            initDataList();
        });
    })

    // 初始化summernote
    function initSummernote() {
        $('#summernote').summernote({
            lang: 'zh-CN',
            placeholder: '在此处输入... ...',
            minHeight: 450,
            maxHeight: 700,
            toolbar: [
                ['Paragraph ', ['style', 'ul', 'ol', 'paragraph', 'height']],
                ['Font ', ['fontname', 'fontsize', 'color', 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                ['Insert', ['link', 'picture', 'video', 'table', 'hr']],
                ['Misc', ['fullscreen', 'codeview', 'undo', 'redo', 'help']]
            ],
            dialogsFade: true,
            callbacks: {
                onImageUpload: function(files, editor, $editable) {
                    sendFile(files);
                }
            }
        });
    }

    function sendFile(files, editor, $editable) {
        var data = new FormData();
        data.append("files", files[0]);
        $.ajax({
            data : data,
            type : "POST",
            url : "/api/files/img", //图片上传出来的url，返回的是图片上传后的路径，http格式
            cache : false,
            contentType : false,
            processData : false,
            dataType : "json",
            success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
                $('#summernote').summernote('insertImage', data.result.url);
                console.log(data.result)
            },
            error:function(){
                alert("上传失败");
            }
        });
    }

    // 初始化icheck
    function initIcheck() {
        if ($('.icheck-con').length > 0) {
            $('input.icheck-con').iCheck({
                checkboxClass: 'icheckbox_square-grey',
                radioClass: 'iradio_square-grey',
                increaseArea: '20%'
            });
        }
    }

    // 编辑
    function editContent(id) {
        $("#head-area").addClass('hide');
        $("#new-content-area").removeClass('hide');
        initSummernote();
//        resetEditContent(id);
        $('#reset-btn').unbind(); //移除所有
        $('#save-btn').unbind(); //移除所有
        $("#reset-btn").attr('onclick', '')
            .attr('onclick', 'resetEditContent(\'' + id + '\')')
        $("#save-btn").attr('onclick', '')
            .attr('onclick', 'saveEditContent(\'' + id + '\')')
        $("#cancel").attr('onclick', 'cancelBtn()')
    }

    // 保存编辑
    function saveEditContent(id) {
        var query = {};
        query.title = $('#new-title').val();
        query.order = $('#new-order').val();
        query.is_display = $('#new-display').val() === 'true';
        query.desc = $('#new-desc').val();
        query.img = $('#new-img').val();
        query.url = $('#new-href').val();
        query.person = {
            name: $('#new-name').val(),
            honor: $('#new-honor').val()
        }
        // 获取值
        var reg = /(<div>)?(.+)(<\/div>)?/
        query.content = reg.exec($('.summernote-lg').summernote('code'))[2];

        $.ajax({
            url: 'api/channels/' + channelId + '/contents/' + id,
            type: 'PUT',
            data: query,
            success: function (data) {
                if (data.code == 1) {
                    toastr.success("内容修改成功！");
                    initDataTable();
                    $("#search-area").removeClass('hide');
                    $("#new-btn").removeClass('hide');
                    $("#reset-btn").addClass('hide');
                    $("#new-save").addClass('hide');
                    $("#new-area").addClass('hide');
                    $("#new-content-area").addClass('hide');
                    $("#summernote").addClass('hide');
                    $("#list-area").removeClass('hide');
                    $("#search-area").removeClass('hide');
                } else {
                    toastr.error("内容修改失败:" + data.msg);
                }
                $('#save').unbind(); //移除所有
            }
        });
    }

    // 删除
    function delContent(id) {
        swal({
                title: "",
                text: "是否删除此条内容？",
                type: "warning",
                showCancelButton: true,
                closeOnConfirm: false,
                closeOnCancel: false
            },
            function (isConfirm) {
                if (isConfirm) {
                    swal("", "已删除！", "success");
                } else {
                    swal("", "已取消删除！", "error");
                }
            });
    }

    // 详情
    function detailContnt(cat_id, con_id) {
        $("#show-modal").modal('show');
        $.ajax({
            url: '/api/category/' + cat_id + ':/content/' + con_id,
            type: 'GET',
            success: function (rm) {
                var data = rm.result
                if (rm.code == 1) {
                    $("#show-title").text(data.content_title);
                    $("#show-content").html(data.content_content);
                } else {
                    toastr.error("获取详情失败:" + rm.msg);
                }
            }
        });
    }

    // 新增
    function newContent() {
        initSummernote();
        initIcheck();
        $("#head-area").addClass('hide');
        $("#new-content-area").removeClass('hide');

        $('#reset-btn').unbind(); //移除所有
        $("#reset-btn").attr('onclick', '')
            .attr('onclick', 'resetNewContent()')
        $('#save-btn').unbind(); //移除所有
        $("#save-btn").attr('onclick', '')
            .attr('onclick', 'saveContent()')
        $("#cancel-btn").attr('onclick', 'cancelBtn()')
    }

    // 保存新增
    function saveContent() {
        var query = {};
        var html;
        var str = $('#summernote').summernote('code');
        query.title = $('#content-title').val();
        query.user_id = userId;
        query.cat_id = categoryId;
        query.is_pub = $('input:radio:checked')[0].defaultValue;
        if (str.indexOf('<div>') < 0) {
            html = str;
        } else {
            html = str.substring(5, str.length - 6);
        }
        if (html == '<p><br></p>') {
            toastr.warning("文章内容不可为空！");
            return;
        }
        query.content = html;
        $.ajax({
            url: '/api/category/' + categoryId + '/content',
            type: 'POST',
            data: query,
            success: function (data) {
                if (data.code == 1) {
                    toastr.success("新增文章成功！");
                    $("#head-area").removeClass('hide');
                    $("#new-content-area").addClass('hide');
                    initDataList();
                } else {
                    toastr.error("新增文章失败:" + data.msg + "！");
                }
            }
        });
    }

    // 初始化table数据
    function initDataList() {
        $.ajax({
            url: '/api/category/' + categoryId + '/content',
            type: 'GET',
            success: function (rm) {
                if (rm.code == 1) {
                    var data = rm.result;
                    var str = '';
                    var sty = '';
                    data.map(function (index, key) {
                        if (index.is_pub) {
                            sty = 'warning';
                        } else {
                            sty = 'primary'
                        }
                        var operat = '<apan title="修改" href="#" onclick="editContent(\'' + index.cat_id + '\',\'' + index.objectId + '\')"><i class="fa fa-edit"></i></apan>&nbsp;&nbsp;' +
                            '<span title="删除" href="#" onclick="delContent(\'' + index.cat_id + '\',\'' + index.objectId + '\')"><i class="fa fa-trash-o"></i></span>&nbsp;&nbsp;' +
                            '<span title="详情" href="#"  onclick="detailContnt(\'' + index.cat_id + '\',\'' + index.objectId + '\')"><i class="fa fa-list-alt"></i></span>&nbsp;&nbsp;';

                        str += '<tr>' +
                            '<td>' + (key + 1) + '</td>' +
                            '<td>' + index.content_title + '</td>' +
                            '<td>' + index.read + '</td>' +
                            '<td>' + index.dislike + '</td>' +
                            '<td>' + index.like + '</td>' +
                            '<td><span class="label label-' + sty + '">' + (index.is_pub ? "是" : '否') + '</span></td>' +
                            '<td>' + moment(index.updatedAt).format('YYYY-MM-DD HH:mm:ss') + '</td>' +
                            '<td>' + operat + '</td>' +
                            '</tr>';
                    })
                    $("#content-table tbody").html(str);
                } else {
                    toastr.error("查询文章失败:" + rm.msg + "！");
                }
            }
        });
    }

    // 重置新增
    function resetNewContent() {
        $('.summernote-lg').summernote('reset');
        $("input").val('');
        $("#new-display").val('');
        $("#new-desc").val('')
        $("#new-order").val(0)
        $("#new-img-url-area").addClass('hide')
    }

    // 重置编辑
    function resetEditContent(id) {
        initSummernote();
        resetNewContent();
        $.ajax({
            url: 'api/channels/' + channelId + '/contents/' + id,
            type: 'GET',
            success: function (rm) {
                var data = rm.result
                if (rm.code == 1) {
                    $("#new-title").val(data.title)
                    $("#new-order").val(data.order)
                    $("#new-desc").val(data.desc)
                    $("#new-display").val(data.is_display === true ? 'true' : 'false');
                    $("#new-img-url-area").removeClass('hide')
                    $("#new-img").val(data.img);
                    $('.summernote-lg').summernote('insertNode', $('<div id="summernote-textarea">' + data.content + '</div>')[0]);
                    $("#summernote-textarea").prev().remove();
                    $("#summernote-textarea").next().remove();
                    $("#new-href").val(data.url);
                    $("#new-name").val(data.person.name);
                    $("#new-honor").val(data.person.honor);
                } else {
                    toastr.error("源内容获取失败:" + data.msg);
                }
                $('#save').unbind(); //移除所有
            }
        });
    }

    // 取消
    function cancelBtn() {
        $("#head-area").removeClass('hide');
        $("#new-content-area").addClass('hide');
    }

    // 返回
    function returnPage() {
        $("#search-area").removeClass('hide');
        $("#new-btn").removeClass('hide');
        $("#list-area").removeClass('hide');
        $("#search-area").removeClass('hide');
        $("#detail-area").addClass('hide');
        $("#return").addClass('hide');
        $("#head-area").removeClass('hide');
    }

    //    var uploader = new plupload.Uploader({
    //        browse_button: 'new-img-select', //触发文件选择对话框的按钮，为那个元素id
    //        runtimes: 'html5',
    //        max_file_size: '10mb',
    //        unique_names: false,
    //        multi_selection: false,
    //        url: "/api/channels/imgs",
    //        filters: [
    //            {title: "Image files", extensions: "jpg,gif,png"}
    //        ]
    //    });
    //
    //    //在实例对象上调用init()方法进行初始化
    //    uploader.init();
    //
    //    //绑定各种事件，并在事件监听函数中做你想做的事
    //    uploader.bind('FilesAdded', function (uploader, files) {
    //        $("#new-img-name").val(files[0].name)
    //
    //    });
    //    uploader.bind('FileUploaded', function (uploader, files, res) {
    //        var data = JSON.parse(res.response)
    //        console.log(data.url)
    //        $("#new-img").val(data.result.url)
    //        $("#new-img-url-area").removeClass('hide')
    //    });
    //
    //    //最后给"开始上传"按钮注册事件
    //
    //    $("#new-img-upload").bind('click', function () {
    //        uploader.start();
    //    })
</script>